<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Send Email</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css" />
<link rel="Stylesheet" type="text/css" href="js/style/jHtmlArea.css" />
<script type="text/javascript">
function flyToPage(task,nomor){
		document.forms[0].task.value = task;
		document.forms[0].nomor.value = nomor;	
		if(document.getElementById("emailContent").value!="" || document.getElementById("emailContent").value!=null){
			document.forms[0].elements['cModel.content'].value = document.getElementById("emailContent").value;
		}else{
			document.forms[0].elements['cModel.content'].value ="";
		}
		
		document.forms[0].submit();		
}

function hideAlert(id1,id2){
	if(id1!="")document.getElementById(''+id1+'').style.display = 'none';
	if(id2!="")document.getElementById(''+id2+'').style.display = 'none';
}
function loadEmailTo(){
	 hide();
	 document.forms[0].elements['cModel.to'].value =document.forms[0].emailTo.value;
}

function validateForm(){
	var emailDt = document.forms[0].elements['cModel.to'].value;
	if(emailDt == null || emailDt == ""){
		if (emailDt == null || emailDt == "") {
			document.getElementById('email').style.display = '';	
		}else{
			var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
			if(!emailDt.match(emailvalid)){			
				document.getElementById('isValidEmail').style.display = '';
			}
		}
		return false;
	}else{
		return true;
	}
}

function hide(){
	document.getElementById('isValidEmail').style.display = 'none';
	document.getElementById('email').style.display = 'none';
}
</script>
</head>
<body onload="javascript:loadEmailTo();">
	<table width="1000px" class="bodyTable boxShadow">

		<!-- Header -->
		<tr>
			<td colspan="2"><%@include file="/include/Header.jsp"%></td>
		</tr>
		<tr>
			<td rowspan="2" width="200px" class="navigationBox"><%@include
					file="/include/Navigation.jsp"%></td>
			<td align="center" class="headerBox blueBackground">Email</td>
		</tr>
		<tr>
			<td align="center" class="contentStyle"><br> 
			<html:form action="/Candidate" method="post">
			<html:hidden property="task" name="candidateForm" />
			<html:hidden property="nomor" name="candidateForm" />
			<html:hidden property="emailFrom" name="candidateForm" />
			<html:hidden property="cModel.content" name="candidateForm" />
			<html:hidden property="emailTo" name="candidateForm" />
			<html:hidden property="passEmail" name="candidateForm" />
			<html:hidden property="cModel.to" name="candidateForm" />
				<table align="center" >
					<tr>
						<td style=" padding: 5px 7px;">To</td>
						<!-- <td>:</td> -->
						<td style=" padding: 5px 7px;"><html:text
								property="cModel.to" name="candidateForm"
								styleClass="textMedium" onkeyup="javascript:hideAlert('email','isValidEmail');"></html:text>	
						</td>
						<td>
							<div id="email">
							<font color="red"><h5>Email is Required</h5></font>
							</div>
							<div id="isValidEmail">
							<br><font color="red"><h5>Email is Invalid</h5></font>
							</div>	
						</td>
					</tr>
					<tr>
						<td style=" padding: 5px 7px;">Subject</td>
						<!-- <td>:</td> -->
						<td style=" padding: 5px 7px;"><html:text
								property="cModel.subject" name="candidateForm"
								styleClass="textMedium"></html:text></td>
					</tr>
					<tr>
<!-- 						<td style="vertical-align: middle; padding: 5px 7px;">To</td> -->
						<!-- <td>:</td> -->
						<td colspan="2" style="vertical-align: middle; padding: 5px 7px;">
						<textarea id="emailContent" style="width:100%;"rows="30"></textarea>
<%-- 						<html:textarea --%>
<%-- 								property="cModel.content" rows="10" cols="5" name="candidateForm" --%>
<%-- 								styleClass="textLarge"></html:textarea> --%>
								<script src="/WebFinalProject/js/scripts/jquery-1.3.2.min.js"></script>
									<script type="text/javascript" src="js/scripts/jHtmlArea-0.7.5.js"></script>
								 	<script type="text/javascript">
								        $(function() {
								        	 $("textarea").htmlarea({
								        		 toolbar: [
								        		           ["html"], ["bold", "italic", "underline", "|", "forecolor" , "|", "subscript", "superscript"],
								        		           ["h1", "h2", "h3", "h4", "h5", "h6"],
								        		           ["justifyleft", "justifycenter", "justifyright","horizontalrule"],
								        		           ["link", "unlink", "|", "image"]
								        	 			  ]
								        	 });
								        });
								    </script>
								</td>
					</tr>
					<tr>
								<td align="center" style="vertical-align: middle; padding: 5px 7px;">
									<input type="button" class="buttonStyle" value="Send" onclick="javascript:flyToPage('send',1);">
									<input type="button" class="buttonStyle" value="Cancel" onclick="javascript:flyToPage('cancel',3);">
								</td>
					</tr>
				</table>
				</html:form>
				</td>
		</tr>
		</table>
</body>
</html>